<template>
	<view>
		<!-- 图片区 -->
		<view class="detail-img">
			<img class="detail-img-pic" :src="competition.activityImg"  />
		</view>
		<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in competition.activityImg" :key="i">
				<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?id=' +item.id">
					<image :src="item.url"></image>
				</navigator>
			</swiper-item>
			
		</swiper> -->
		
		<!-- 主题 -->
		<view class="detail-tital">
			<view class="detail-tital-left">
				<view class="detail-tital-name">
					{{competition.activityTitle}}
				</view>
				<view class="detail-people">
					{{competition.activityApplicationBeginTime}}至{{competition.activityApplicationEndTime}}
				</view>
			</view>
			<!-- 是否已报名 -->
			<view class="detail-tital-right" >
				已结束
			</view>
			
		</view>
		<!-- 简介 -->
		<view class="detail-tital-intro">
			<view class="detail-tital-intro-name">
				活动主题描述
			</view>
			<view class="detail-tital-intro-detail">
				<uni-section >
					<uni-tooltip>
						<view class="detail-tital-intro-detail-text">{{competition.activityIntroduction}}</view>
						<template v-slot:content>
							<view class="uni-stat-tooltip">
								{{competition.activityIntroduction}}
							</view>
						</template>
					</uni-tooltip>
				</uni-section>
			</view>
		</view>
		<!-- 详情-->
		<view class="competition-detail">
			<view class="competition-detail-name">
				活动详情
			</view>
			<view class="competition-detail-detail">
				{{competition.activityDetail}}
				
			</view>
		</view>
		<!-- 比赛结果 -->
		<view class="competition-end">
			<view class="competition-end-name">
				比赛结果
			</view>
			<view class="competition-end-detail">
				{{competition.activityDetail}}
				
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState} from 'vuex'
	export default {
		data() {
			return {
				// 请求参数对象
				queryObj: {
					// 大赛Id
					id: '',
				},
				competition: '',
			}
		},
		computed: {
		  ...mapState('m_user', ['userId'])
		},
		onLoad(options) {
			this.baseUrl=uni.$http.baseUrl
			this.queryObj.id = options.id || ''
			const id = options.id
			console.log("======"+id)
			this.getCompetitionEnd(id)
		},
		methods: {
			//报名中
			async getCompetitionEnd(id){
				await uni.request({
				    url: this.baseUrl+'/api/activity/getActivityDetail', //仅为示例，并非真实接口地址。
				    data: {
				        // 学校Id
				        id: this.queryObj.id,
						userId: this.userId
				    },
					method: 'POST',
				    header: {
				          // "Content-Type": "application/json",
				          "Content-Type": "application/x-www-form-urlencoded"
				        },
				    success: (res) => {
						this.competition=res.data.data
					
				    },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.detail-img{
	height: 200px;
	.detail-img-pic{
		width: 100%;
		height: 100%;
	}
}
.detail-tital{
	background-color: white;
	height: 50px;
	margin-top: 20px;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.detail-tital-left{
		width: 85%;
		display: flex;
		flex-direction: column;
		.detail-tital-name{
			font-size: 18px;
		}
		.detail-people{
			font-size: 14px;
			padding-top: 8px;
			color: #939393;
		}
	}
	.detail-tital-right{
		
		width: 15%;
	}
		
}
.detail-tital-intro{
	margin-top: 10px;
	padding: 10px;
	height: 80px;
	background-color: white;
	.detail-tital-intro-name{
		font-size: 18px;
	}
	.detail-tital-intro-detail{
		font-size: 14px;
		.uni-section .uni-section-header{
			padding: 0;
		}
		padding-top: 10px;
		.detail-tital-intro-detail-text{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height:50rpx
		}
		.uni-stat-tooltip {
			width: 300px;
		}
		
	}
}
.competition-detail{
	margin-top: 10px;
	padding: 10px;
	background-color: white;
	.competition-detail-name{
		font-size: 18px;
	}
	.competition-detail-detail{
		font-size: 14px;
		padding-top: 8px;
		/* 设置样式以保留换行 */
		white-space: pre-wrap;
		line-height:50rpx
	}
}
.competition-end{
	margin-top: 10px;
	padding: 10px;
	background-color: white;
	.competition-end-name{
		font-size: 18px;
	}
	.competition-end-detail{
		font-size: 14px;
		padding-top: 8px;
		/* 设置样式以保留换行 */
		white-space: pre-wrap;
		line-height:50rpx
	}
}
	

</style>
